<template>
	<div class="sl_home_company__container">
    <div class="place-form base-padding">
      <icon type="icon-icon-f1" size="2"/>
      <div class="title" @click="onClickCommonHome">
        <p>家</p>
        <small>
          {{ userCarState.searchAddress.commonHome.address ? userCarState.searchAddress.commonHome.address: '点击设置' }}
        </small>
      </div>
      <div class="more" @click="onClickCommonHome('edit')">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="place-to base-padding">
      <icon type="icon-hotel" size="2"></icon>
      <div class="title" @click="onClickCommonCompany">
        <p>公司</p>
        <small>
          {{ userCarState.searchAddress.commonCompany.address ? userCarState.searchAddress.commonCompany.address : '点击设置' }}
        </small>
      </div>
      <div class="more" @click="onClickCommonCompany('edit')">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script>
import storejs from 'storejs'
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState([
      'userCarState'
    ])
  },
  mounted () {
    if (storejs.has('SET_COMMON_ADDRESS_HOME')) {
      this.SET_COMMON_ADDRESS_HOME(storejs.get('SET_COMMON_ADDRESS_HOME'));
    }
    if (storejs.has('SET_COMMON_ADDRESS_COMPANY')) {
      this.SET_COMMON_ADDRESS_COMPANY(storejs.get('SET_COMMON_ADDRESS_COMPANY'));
    }
  },
  methods: {
    ...mapMutations([
      'SET_SHOW_TARGET_ADDRESS',
      'SET_COMMON_ADDRESS_HOME_STATE',
      'SET_COMMON_ADDRESS_COMPANY_STATE',
      'SET_COMMON_ADDRESS_HOME',
      'SET_COMMON_ADDRESS_COMPANY',
      'SET_USER_CAR_START_ADDRESS',
      'SET_USER_CAR_END_ADDRESS'
    ]),
    onClickCommonHome (state) {
      if (state === 'edit' || !this.userCarState.searchAddress.commonHome.address) {
        this.SET_SHOW_TARGET_ADDRESS('isOpenRemoteAddress');
        this.SET_COMMON_ADDRESS_HOME_STATE(true);
        return false
      }
      this.SET_USER_CAR_START_ADDRESS(this.userCarState.searchAddress.commonHome);
      this.$router.push('/carIndex');
    },
    onClickCommonCompany (state) {
      if (state === 'edit' || !this.userCarState.searchAddress.commonCompany.address) {
        this.SET_SHOW_TARGET_ADDRESS('isOpenRemoteAddress');
        this.SET_COMMON_ADDRESS_COMPANY_STATE(true);
        return false
      }
      this.SET_USER_CAR_END_ADDRESS(this.userCarState.searchAddress.commonCompany);
      this.$router.push('/carIndex');
    }
  }
}
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"

  .sl_home_company__container
    background #fff
    display: flex
    padding 1 * .61rem 0
    >div
      position relative
      width 50%
      display flex
      align-content center
      .icon
        color: $sl_font_color_desc_s
      .title
        display inline-block
        padding-left 1 * .61rem
        font-size $sl_font_color_default
        p
          font-size $sl_font_size_14
          padding-bottom .8 * .61rem
        small
          color $sl_font_color_desc_s
          font-size $sl_font_size_small
          overflow hidden
          text-overflow ellipsis
          -webkit-line-clamp 1
          white-space nowrap
          width 9 * .61rem
          display block
      .more
        background #f1f1f1
        position absolute
        right 1 * .61rem
        top 50%
        padding .5 * .61rem
        border-radius 8px
        overflow hidden
        transform translateY(-50%)
        display flex
        flex-direction column
        align-items center
        flex-wrap wrap
        >div
          width 2px
          height 2px
          border-radius 50%
          background #999
          margin 2px 0
    .place-form
      border-right 1px #ddd solid
</style>
